<template>
  <view class="container">


    <view class="form-container">
      <view class="form-item">
        <text class="label">财务活动类型</text>
        <view class="input-wrapper" @tap="openPicker('activityType')">
          <text class="value">{{ form.activityType || '请选择' }}</text>
          <text class="fas fa-chevron-down arrow-icon"></text>
        </view>
      </view>

      <view class="form-item">
        <text class="label">偿还金额</text>
        <input
          class="input-field"
          type="digit"
          v-model="form.amount"
          placeholder="0.00"
          placeholder-class="placeholder-style"
        />
      </view>

      <view class="form-item">
        <text class="label">分类</text>
        <view class="input-wrapper" @tap="openPicker('category')">
          <text class="value">{{ form.category || '请选择' }}</text>
          <text class="fas fa-chevron-down arrow-icon"></text>
        </view>
      </view>

      <view class="form-item">
        <text class="label">账户</text>
        <view class="input-wrapper" @tap="openPicker('account')">
          <text class="value">{{ form.account || '请选择' }}</text>
          <text class="fas fa-chevron-down arrow-icon"></text>
        </view>
      </view>

      <view class="form-item">
        <text class="label">日期</text>
        <view class="input-wrapper" @tap="openDatePicker">
          <text class="value">{{ form.date || '请选择日期' }}</text>
          <text class="fas fa-calendar-alt calendar-icon"></text>
        </view>
      </view>

      <view class="form-item">
        <text class="label">备注 (可选)</text>
        <textarea
          class="textarea-field"
          v-model="form.notes"
          placeholder="例如：和朋友聚餐"
          placeholder-class="placeholder-style"
        ></textarea>
      </view>

      <image 
        src="/static/images/finance.jpg" 
        class="bottom-image"
        mode="aspectFill"
    />
    </view>

    <!-- Picker for activityType, category, account -->
    <uni-popup ref="pickerPopup" type="bottom">
      <view class="popup-content">
        <view class="popup-header">
          <text class="cancel-btn" @tap="closePicker">取消</text>
          <text class="confirm-btn" @tap="confirmPicker">确定</text>
        </view>
        <picker-view
          :indicator-style="indicatorStyle"
          :value="pickerValue"
          @change="bindPickerChange"
          class="picker-view"
        >
          <picker-view-column>
            <view class="item" v-for="(item, index) in pickerData" :key="index">{{ item }}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>

    <!-- Date Picker -->
    <uni-popup ref="datePickerPopup" type="bottom">
      <view class="popup-content">
        <view class="popup-header">
          <text class="cancel-btn" @tap="closeDatePicker">取消</text>
          <text class="confirm-btn" @tap="confirmDatePicker">确定</text>
        </view>
        <picker-view
          :indicator-style="indicatorStyle"
          :value="datePickerValue"
          @change="bindDatePickerChange"
          class="picker-view"
        >
          <picker-view-column>
            <view class="item" v-for="(year, index) in years" :key="index">{{ year }}年</view>
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(month, index) in months" :key="index">{{ month }}月</view>
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(day, index) in days" :key="index">{{ day }}日</view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>

    
  </view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const form = reactive({
  activityType: '',
  amount: '',
  category: '',
  account: '',
  date: '',
  notes: '',
});

const pickerPopup = ref(null);
const datePickerPopup = ref(null);
const currentPickerType = ref('');
const pickerData = ref([]);
const pickerValue = ref([0]);
const tempPickerValue = ref([0]);

const datePickerValue = ref([0, 0, 0]);
const tempDatePickerValue = ref([0, 0, 0]);

const activityTypes = ['偿还负债', '收入', '支出', '转账'];
const categories = ['房贷', '餐饮', '交通', '购物', '娱乐', '医疗', '教育'];
const accounts = ['现金', '银行卡', '支付宝', '微信支付'];

const indicatorStyle = `height: 50px;`;

const years = computed(() => {
  const currentYear = new Date().getFullYear();
  return Array.from({ length: 10 }, (v, i) => currentYear + i);
});

const months = computed(() => {
  return Array.from({ length: 12 }, (v, i) => i + 1);
});

const days = computed(() => {
  const year = years.value[tempDatePickerValue.value[0]];
  const month = months.value[tempDatePickerValue.value[1]];
  return new Date(year, month, 0).getDate();
});

const goBack = () => {
  uni.navigateBack();
};

const saveRecord = () => {
  console.log('保存记录', form);
  // Implement save logic here
  uni.showToast({
    title: '记录已保存',
    icon: 'success',
  });
  // uni.navigateBack();
};

const openPicker = (type) => {
  currentPickerType.value = type;
  switch (type) {
    case 'activityType':
      pickerData.value = activityTypes;
      pickerValue.value = [activityTypes.indexOf(form.activityType) > -1 ? activityTypes.indexOf(form.activityType) : 0];
      break;
    case 'category':
      pickerData.value = categories;
      pickerValue.value = [categories.indexOf(form.category) > -1 ? categories.indexOf(form.category) : 0];
      break;
    case 'account':
      pickerData.value = accounts;
      pickerValue.value = [accounts.indexOf(form.account) > -1 ? accounts.indexOf(form.account) : 0];
      break;
  }
  tempPickerValue.value = [...pickerValue.value];
  pickerPopup.value.open();
};

const closePicker = () => {
  pickerPopup.value.close();
};

const bindPickerChange = (e) => {
  tempPickerValue.value = e.detail.value;
};
// 处理导航栏按钮点击事件
const onNavigationBarButtonTap = (e) => {
  console.log(`点击了第${e.index + 1}个按钮`)
  if (e.index === 0) { // 第一个按钮（保存按钮）
    this.saveRecord()
  }
};
const confirmPicker = () => {
  const selectedValue = pickerData.value[tempPickerValue.value[0]];
  switch (currentPickerType.value) {
    case 'activityType':
      form.activityType = selectedValue;
      break;
    case 'category':
      form.category = selectedValue;
      break;
    case 'account':
      form.account = selectedValue;
      break;
  }
  closePicker();
};

const openDatePicker = () => {
  const today = new Date();
  const yearIndex = years.value.indexOf(today.getFullYear());
  const monthIndex = months.value.indexOf(today.getMonth() + 1);
  const dayIndex = Array.from({ length: days.value }, (v, i) => i + 1).indexOf(today.getDate());

  datePickerValue.value = [
    yearIndex > -1 ? yearIndex : 0,
    monthIndex > -1 ? monthIndex : 0,
    dayIndex > -1 ? dayIndex : 0,
  ];
  tempDatePickerValue.value = [...datePickerValue.value];
  datePickerPopup.value.open();
};

const closeDatePicker = () => {
  datePickerPopup.value.close();
};

const bindDatePickerChange = (e) => {
  tempDatePickerValue.value = e.detail.value;
};

const confirmDatePicker = () => {
  const year = years.value[tempDatePickerValue.value[0]];
  const month = months.value[tempDatePickerValue.value[1]];
  const day = Array.from({ length: days.value }, (v, i) => i + 1)[tempDatePickerValue.value[2]];
  form.date = `${year}/${month < 10 ? '0' + month : month}/${day < 10 ? '0' + day : day}`;
  closeDatePicker();
};

onLoad(() => {
  // Set initial date to today
  const today = new Date();
  const year = today.getFullYear();
  const month = today.getMonth() + 1;
  const day = today.getDate();
  form.date = `${year}/${month < 10 ? '0' + month : month}/${day < 10 ? '0' + day : day}`;
});
</script>

<style lang="scss">
@import '@/static/css/fontawesome.min.css';
@import '@/static/css/brands.min.css';
@import '@/static/css/solid.min.css';

page {
  background-color: #f7f7f7;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f7f7f7;
}

.nav-bar {
  /* #ifndef H5 */
  padding-top: 20px; /* Adjust for status bar */
  /* #endif */
  .nav-icon {
    font-size: 20px;
    color: #00b386;
  }
  .save-text {
    color: #00b386;
    font-size: 16px;
    font-weight: bold;
  }
}

.form-container {
  padding: 20px;
  background-color: #fff;
  margin: 10px 15px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.form-item {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

.label {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
  display: block;
}

.input-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #eee;
}

.input-field,
.textarea-field {
  width: 100%;
  min-height: 88rpx;
  padding: 24rpx;
  border: 1px solid #D1D5DB;
  border-radius: 16rpx;
  font-size: 32rpx;
  color: #1F2937;
  background-color: #FFFFFF;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  line-height: 40rpx;
}

.textarea-field {
  min-height: 80px;
  padding-top: 12px;
}

.value {
  flex: 1;
  font-size: 16px;
  color: #333;
}

.arrow-icon,
.calendar-icon {
  font-size: 14px;
  color: #999;
  margin-left: 10px;
}

.placeholder-style {
  color: #9CA3AF;
}

.popup-content {
  background-color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding-bottom: env(safe-area-inset-bottom);
}

.popup-header {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.cancel-btn,
.confirm-btn {
  font-size: 16px;
  color: #007aff;
}

.confirm-btn {
  font-weight: bold;
}

.picker-view {
  width: 100%;
  height: 200px;
  text-align: center;
}

.item {
  line-height: 50px;
  font-size: 18px;
}

.bottom-image {
  width: calc(100% - 0px);
  height: 150px;
  border-radius: 10px;
  // margin: 10px 15px 20px 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
</style>